<template>
  <div>
    <div>分配权限功能</div>
    <!-- 权限点数据展示 -->
    <!-- check-strictly在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false -->
    <!-- default-expand-all是否默认展开所有节点 -->
    <el-tree
      ref="tree"
      :data="permissionList"
      :props="{ label: 'name' }"
      check-strictly
      show-checkbox
      default-expand-all
      node-key="id"
      :default-checked-keys="defaultPermIds"
    />
    <!-- 属性方式：如果值比较少，没办法取消掉原来选中的，发现文档里还有tree内部的方法 -->

    <el-row class="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="cancelButton">取 消</el-button>
        <el-button size="small" type="primary" @click="setRolesBtn"
          >确 定</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AssignPermission',
  props: {
    permissionList: {//获取所有权限点树形的
      type: Array,
      default () {
        return []
      }
    },
    // 某个角色-现有权限点id组成的数组
    defaultPermIds: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  watch: {
    defaultPermIds () {
      // el-tree用方法来设置默认选中更好

      //  setCheckedKeys	通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
      this.$refs.tree.setCheckedKeys(this.defaultPermIds)
    }
  },
  methods: {
    // 取消按钮
    cancelButton () {
      // 问题：多的，少的有变化的默认选中值的时候，会看到之前的数据还在闪烁一下
      // 因为：1.因为上一次的标签状态还在（弹框是用css隐藏显示的）标签状态还在
      // 2.显示后，新的数据发送请求需要时间，但是页面已经展示出来了（所以显示上一次标签里数据状态）
      // 3.新数据回来了-在我点击弹窗时，发生了更新数据
      // 解决办法：关闭就清空树形控件默认选中的数组值
      this.$refs.tree.setCheckedKeys([])//取消弹窗闪烁，置空
      this.$emit('update:dialogVisible', false)

    },

    // 确定权限按钮
    setRolesBtn () {
      // getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组（element内置的属性）
      // this.$refs.tree.getCheckedKeys()拿到的是选中的这些节点的node-key指定对象字段的值，形成数组
      this.$emit('confirmEV', this.$refs.tree.getCheckedKeys())
      this.$refs.tree.setCheckedKeys([])//取消弹窗闪烁，置空
      this.$emit('update:dialogVisible', false)

    }
  }




}
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 30px;
}
</style>